<template>
  <div class="breadcrumb-container">
    <div class="breadcrumb-left">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item 
          v-for="item in breadcrumbs" 
          :key="item.path"
          :to="item.path"
        >
          {{ item.meta?.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="breadcrumb-right">
      <slot name="right"></slot>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import type { RouteLocationMatched } from 'vue-router'

const route = useRoute()

const breadcrumbs = computed(() => {
  return route.matched.filter(item => {
    return item.meta && item.meta.title && !item.meta.hidden
  })
})
</script>

<style scoped lang="scss">
.breadcrumb-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: $header-height;
  width: 100%;
  padding: 0 $spacing-md;
  background-color: var(--el-bg-color);
  border-bottom: 1px solid var(--el-border-color-light);
  
  .breadcrumb-left {
    flex: 1;
    min-width: 0; // 防止内容溢出
    margin-right: $spacing-md;
    
    :deep(.el-breadcrumb) {
      .el-breadcrumb__item {
        .el-breadcrumb__inner {
          color: var(--el-text-color-regular);
          font-weight: normal;
          
          &.is-link {
            color: var(--el-color-primary);
            font-weight: 500;
            
            &:hover {
              color: var(--el-color-primary-light-3);
            }
          }
        }
        
        &:last-child {
          .el-breadcrumb__inner {
            color: var(--el-text-color-primary);
          }
        }
      }
    }
  }
  
  .breadcrumb-right {
    display: flex;
    align-items: center;
    gap: $spacing-md;
    flex-shrink: 0; // 防止右侧内容被压缩
  }
}

// 响应式适配
@include respond-to(xs) {
  .breadcrumb-container {
    padding: 0 $spacing-xs;
    
    .breadcrumb-left {
      margin-right: $spacing-xs;
    }
    
    .breadcrumb-right {
      gap: $spacing-xs;
    }
  }
}

@include respond-to(sm) {
  .breadcrumb-container {
    padding: 0 $spacing-sm;
    
    .breadcrumb-left {
      margin-right: $spacing-sm;
    }
    
    .breadcrumb-right {
      gap: $spacing-sm;
    }
  }
}

// 移动端适配
@media (max-width: 768px) {
  .breadcrumb-container {
    .breadcrumb-left {
      :deep(.el-breadcrumb__item) {
        &:not(:last-child) {
          display: none;
        }
      }
    }
  }
}
</style> 